<template>
  <li
    class="dropdown-option"
    :class="{'is-disabled': disabled}"
  >
    <slot></slot>
  </li>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default {
  name: "DrowdownItem",
  // import 引入的组件需要注入到对象中才能使用
  components: {//组件

  },
  props: {//属性
    disabled: {
      type: Boolean,
      default: false
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // setup在beforeCreate之前执行一次，this是undefined。
  setup() {

    return {//组件中使用的变量和绑定的方法都需要return才能使用

    };
  }
};
</script>

<style scoped>
.dropdown-option.is-disabled * {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}
</style>
